<template>
  <div class="classData">
    <div class="heads">
      <div class="fh" @click="$router.go(-1)">
        <span class="iconfont icon-arrow-left-bold"></span> 返回
      </div>
      <div class="center">分类详情</div>
       <router-link class="shuJ" tag="div" to="/bookshelf"><span class="iconfont icon-shujia"></span> 书架</router-link>
    </div>
    <div class="class">
      <div class="box">
        <div class="title">时间 :</div>
        <div class="list">
          <div :class="sort == 1 ? 'con' : ''" @click="sort = 1">最热</div>
          <div :class="sort == 3 ? 'con' : ''" @click="sort = 3">最新</div>
        </div>
      </div>
      <div class="box">
        <div class="title">进度 :</div>
        <div class="list">
          <div :class="bookStatus == 0 ? 'con' : ''" @click="bookStatus = 0">
            全部
          </div>
          <div :class="bookStatus == 1 ? 'con' : ''" @click="bookStatus = 1">
            连载中
          </div>
          <div :class="bookStatus == 2 ? 'con' : ''" @click="bookStatus = 2">
            已完结
          </div>
        </div>
      </div>
      <div class="box">
        <div class="title">价格 :</div>
        <div class="list">
          <div :class="pay == 0 ? 'con' : ''" @click="pay = 0">全部</div>
          <div :class="pay == 1 ? 'con' : ''" @click="pay = 1">收费</div>
          <div :class="pay == 2 ? 'con' : ''" @click="pay = 2">免费</div>
          <div :class="pay == 3 ? 'con' : ''" @click="pay = 3">包月</div>
        </div>
      </div>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="listData" v-for="item in classData" :key="item.id">
        <div class="item" @click="goBook(item.id, item.title)">
          <div class="img">
            <img :src="item.cover" alt="" width="100%" height="100%" />
          </div>
          <div class="txt">
            <div class="title">{{ item.title }}</div>
            <div class="name">{{ item.author }}</div>
            <div class="context">1999万人阅读 | 已完结</div>
            <div class="van-multi-ellipsis--l2 p">
              {{ item.content }}
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import {  getDataList } from "../api/classData";
export default {
  data() {
    return {
      classList: null,
      classData: null,
      catId: null,
      wordCount: 0,
      pay: 0,
      bookStatus: 0,
      sort: 1,
      classIndex: 0,
       loading: false,
      finished: false,
    };
  },
  methods: {
    getCatalog() {
      //发起请求 获取所有的数据！
      this.refreshing = false;   
      getDataList({
        catId: this.catId,
        wordCount: this.wordCount,
        pay: this.pay,
        bookStatus: this.bookStatus,
        sort: this.sort,
      }).then( (data) => {
        let index=this.classData.length
          console.log('object')
        // this.classData.push(...data.list.splice(index,1))
        this.classData=[...this.classData,...data.list.splice(index,5)]
        console.log(this.classData)
         this.loading = false;
          if (this.classData.length == data.list.length) {
            this.finished = true;
          }
      }); 
          
        },
    //滚动加载时触发，list组件定义的方法
    onLoad() {
      console.log('到底啦')
      this.getCatalog(); 
    },
    goBook(id, name) {
      console.log(id, name);
      this.$router.push({
        path: "/bookDetails",
        query: { id: id, name: name },
      });
    },
    getData(){
      this.classData=null
       getDataList({
        catId: this.catId,
        wordCount: this.wordCount,
        pay: this.pay,
        bookStatus: this.bookStatus,
        sort: this.sort,
      }).then((data) => {
        console.log(data);
        this.lengths=data.list.length
        this.classData = data.list.splice(0,5)
      });
    }
  },
  watch: {
    catId() {
      console.log(this.catId);
    },
    sort() {
     this.getData(); 
     this.finished=false
    },
    bookStatus() {
     this.getData(); 
     this.finished=false
    },
    pay() {
     this.getData(); 
     this.finished=false
    },
  },
  created() {
    console.log(this.$route.query.url);
    let url = this.$route.query.url;
    let index = url.lastIndexOf("=");
    this.catId = url.substring(index + 1, url.length);
    console.log(this.catId);
    getDataList({catId:this.catId}).then((data) => {
      console.log(data);
      this.classList = data;
    });
    //catId=7&wordCount=0&pay=0&bookStatus=0&sort=1
    
      this.getData()
  },
};
</script>
<style lang="less">
.classData {
  overflow-x: hidden;
  .heads {
    display: flex;
    justify-content: space-between;
    color: #fff;
    background-color: black;
    height: 50px;
    line-height: 50px;
    .fh{
      margin-left: 10px;
    }
    .shuJ{
      margin-right: 10px;
    }
    .center {
      font-size: 20px;
      span {
        font-size: 14px;
      }
    }
  }
  .class {
    font-size: 13px;
    padding: 15px;
    background-color: #ebe8e6;
    .box {
      margin: 10px 0;
      display: flex;
      align-items: center;
      .title {
        flex-shrink: 0;
        margin-right: 15px;
      }
      .list {
        display: flex;
        div {
          font-size: 14px;
          color: #fff;
          height: 19px;
          line-height: 19px;
          padding: 1px 5px;
          background-color: #bab6b3;
          text-align: center;
          border-radius: 4px;
          margin-right: 8px;
          &.con {
            background-color: #c9483c;
          }
        }
      }
    }
  }
  .listData {
    .item {
      padding: 15px;
      display: flex;
      border-bottom: #dcdcdc solid 1px;
      .img {
        width: 64px;
        height: 88px;
        margin-right: 10px;
        background-color: pink;
        flex-shrink: 0;
      }
      .txt {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .title {
          font-size: 16px;
          color: #1d2c33;
        }
        .name,
        .context,
        .p {
          font-size: 12px;
          color: #aaa;
        }
      }
    }
  }
}
</style>